<template>
	<view class="pages-evaluate">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="评价订单" leftIcon="icon-left"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		
		<view class="pd-lg mt-md mb-lg ml-lg mr-lg radius-32 fill-base add-upload">
			<upload @upload="imgUpload" :imagelist="param.img" imgclass="mini" imgtype="img" @del="imgUpload" text="上传图片"
				:imgsize="9"></upload>
		</view>
		<view class="ml-lg mr-lg mt-md radius-16 fill-base pl-lg pb-lg pt-sm">
			<view class="flex-y-center pt-lg pb-lg pr-lg">
				<image :src="detail.coach_info.work_img" mode="aspectFill" class="order-image"></image>
				<view class="pl-md">
					<view class="f-paragraph text-bold">{{detail.coach_info.name}}</view>
					<view class="f-icontext c-paragraph">{{detail.order_goods[0].name}}</view>
				</view>
			</view>
			<view class="pt-md flex-warp pb-lg pr-lg">
				<view class="f-mini-title text-bold">服务评分</view>
				<view class="flex-warp pl-lg">
					<block v-for="(item,index) in 5" :key="index">
						<i @tap="changeStar(index*1+1, 'star')" class="iconfont mr-sm iconpingfen1" style="font-size: 22px;"
							:class="[{'icon-empty':param.star<index*1+1},{'icon-font-color icon-solid':param.star>=index*1+1}]"></i>
					</block>
				</view>
			</view>
			<!-- <view class="flex-warp pr-sm pb-lg">
				<view class="mt-md label-item pl-md pr-md mr-md f-paragraph flex-center"
				v-for="(item,index) in labelList" :key="index" @tap="labelChange(index)"
				:style="{color: param.tag.includes(item.name) ? `#fff` : `#4E678D`,background:param.tag.includes(item.name)?primaryColor:`#F7F8FA` }">{{item.name}}</view>
			</view> -->
			<view class="pt-md pr-lg">
				<view class="f-mini-title text-bold pb-sm">您的评价</view>
				<view class="textarea-box fill-body pd-md radius-16">
					<textarea name="" id="" cols="30" rows="10" class="flex-1 f-paragraph" placeholder="您的服务感受是我们优化的动力～" v-model="param.text"></textarea>
					<view class="text-right c-text">{{param.text.length > 300 ? 300 : param.text.length}}/300</view>
				</view>
			</view>
		</view>
		<view class="ml-lg mr-lg mt-md radius-16 fill-base pl-lg pr-lg anony flex-between">
			<text class="f-mini-title text-bold">匿名评价</text>
			<i class="iconfont" style="font-size: 40px;" :style="{color: !param.is_hide? `#f6f6f6` : primaryColor}" 
			:class="[{'icon-switch':!param.is_hide},{'icon-switch-on':param.is_hide}]" @tap="anonyChange"></i>
		</view>
		
		<fix-bottom-button @confirm="submit" borderRadius="8rpx" :text="[{text:'确认提交',type:'confirm',isAuth:false}]"
			bgColor="#fff">
		</fix-bottom-button>
		<view class="space-max-footer"></view>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	
	export default {
		data() {
			return {
				// labelList: [
				// 	{name: '服务态度好', type: 0},
				// 	{name: '预约准时', type: 0},
				// 	{name: '专业知识广', type: 0},
				// 	{name: '打扫干净', type: 1},
				// 	{name: '做事速度快', type: 1}
				// ],
				param: {
					order_id: '',
					text: '',
					img: [],
					star: 5,
					tag: ['服务态度好'],
					is_hide: 0
				},
				options: {},
				detail: {}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(options) {
			this.options = options
			this.param.order_id = options.id
			this.initIndex()
		},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					this.getConfigInfo()
				}
				this.getOrderInfo()
			},
			async getOrderInfo(){
				let data = await this.$api.order.orderInfo(this.options)
				this.detail = data
				this.$util.hideAll()
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.param[imgtype] = imagelist;
			},
			changeStar(index,type){
				this.param[type] = index
			},
			anonyChange(){
				this.param.is_hide = this.param.is_hide == 0 ? 1 : 0
			},
			async submit(){
				let param = this.$util.deepCopy(this.param)
				param.img = param.img.map(item => {
					return item.path
				})
				await this.$api.order.commentOrder(param)
				this.$util.showToast({
					title: `评价成功`
				})
				setTimeout(()=> {
					this.$util.back()
					this.$util.goUrl({url: 1 ,openType: 'navigateBack'})
				},1500)
			},
			labelChange(index){
				let {
					tag
				} = this.param
				let {
					labelList
				} = this
				let {
					name: val = ''
				} = labelList[index]
				
				let ind = tag.findIndex(item => {
					return val == item
				})
				
				if(ind == -1){
					this.param.tag.push(val)
				}else{
					this.param.tag.splice(ind, 1)
				}
			}
		},
	}
</script>


<style lang="scss">
	.pages-evaluate {
		.add-upload{
			min-height: 219rpx;
		}
		.order-image{
			height: 70rpx;
			width: 70rpx;
			border-radius: 70rpx;
		}
		.icon-solid {
			background-image: linear-gradient(#FAD961, #F76B1C);
			margin-right: 5px;
		}
		.icon-empty {
			color: #E4E4E4;
			margin-right: 5px;
		}
		.label-item{
			min-width: 194rpx;
			height: 60rpx;
			border-radius: 60rpx;
		}
		.anony{
			height: 106rpx;
		}
	}
</style>
